<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户信息管理</title>
    <!--  引入bootstrap的css资源文件  -->
    <link href="static/bootstrap-3.4.1-dist/css/bootstrap.min.css" type="text/css" rel="stylesheet">
    <!--  引入jquery的js资源文件【jquery资源文件要在所有的js资源文件之前】  -->
    <script type="text/javascript" src="static/jquery-1.12.4/jquery-1.12.4.min.js"></script>
    <!--  引入bootstrap的js资源文件  -->
    <script type="text/javascript" src="static/bootstrap-3.4.1-dist/js/bootstrap.min.js"></script>

    <script type="text/javascript">
        // 使用ajax进行用户信息查询
        function doQuery() {
            $.ajax({
                type: "post",
                url: "ServletUserinfoQuery",
                dataType: "json",
                data: $("#queryForm").serialize(),
                success: function (result) {
                    alert(result);
                    console.log(result);
                    var strMsg = "";
                    if(result) {
                        alert("if语句");
                        //使用jquery的通用遍历方法遍历数组
                        $.each(result, function (index, user) {//数组  回调函数
                            strMsg += "<tr>";
                            strMsg += "  <th scope='row'>" + (index + 1) + "</th>";
                            strMsg += "   <td>" + user.userName + "</td>";
                            strMsg += "   <td>" + user.userAddress + "</td>";
                            strMsg += "   <td>" + user.userTel + "</td>";
                            strMsg += "   <td>" + user.userBirthday + "</td>";
                            strMsg += "   <td>" + user.userRegDate + "</td>";
                            strMsg += "</tr>";
                        })
                    }
                    $("#showData").html(strMsg);
                },
                error: function () {
                    alert("失败");
                }
            })
        }
    </script>
</head>
<body>
<div style="padding-top: 30px;">
    <form class="form-horizontal" action="ServletUserLogin" method="post" id="queryForm">

        <div class="form-group">
            <label class="col-sm-2 control-label">用户名</label>
            <div class="col-sm-3">
                <input type="text" class="form-control" id="userName" name="userName" placeholder="请输入用户名">
            </div>

            <label class="col-sm-2 control-label">地址</label>
            <div class="col-sm-3">
                <input type="text" class="form-control" id="userAddress" name="userAddress" placeholder="请输入地址">
            </div>
        </div>

        <div class="form-group">
            <label class="col-sm-2 control-label">电话</label>
            <div class="col-sm-3">
                <input type="text" class="form-control" id="userTel" name="userTel" placeholder="请输入电话">
            </div>

            <label class="col-sm-2 control-label">出生日期</label>
            <div class="col-sm-3">
                <div class="col-sm-5">
                    <input type="date" class="form-control" id="userBirthday" name="userBirthday" placeholder="开始日期">
                </div>
                <div class="col-sm-2">
                    -
                </div>
                <div class="col-sm-5">
                    <input type="date" class="form-control" id="userBirthday2" name="userBirthday2"
                           placeholder="截至日期">
                </div>

            </div>
        </div>

        <div class="form-group">
            <label class="col-sm-2 control-label">注册日期</label>
            <div class="col-sm-3">
                <div class="col-sm-5">
                    <input type="date" class="form-control" id="userRegDate" name="userRegDate" placeholder="开始日期">
                </div>
                <div class="col-sm-2">
                    -
                </div>
                <div class="col-sm-5">
                    <input type="date" class="form-control" id="userRegDate2" name="userRegDate2" placeholder="截至日期">
                </div>
            </div>
        </div>

        <div class="form-group">
            <div class="col-sm-offset-3 col-sm-3">
                <button type="button" class="btn btn-default" onclick="doQuery()">查询</button>
            </div>
        </div>
    </form>
</div>
<div>
    <table class="table table-hover">
        <thead>
        <tr>
            <th>序号</th>
            <th>用户名</th>
            <th>地址</th>
            <th>电话</th>
            <th>出生日期</th>
            <th>注册日期</th>
        </tr>
        </thead>
        <tbody id="showData">

        </tbody>
    </table>
</div>
</body>
</html>